<script type="text/x-template" id="template-main_share">
    <div>
        <el-tabs v-model="tabValue" @tab-click="currentPage=1;rest()">
            <el-tab-pane name="1" label="我的分享"></el-tab-pane>
            <el-tab-pane name="2" label="我收到的分享"></el-tab-pane>
        </el-tabs>
        <el-form class="div-main" :model="form" ref="searchForm" label-width="70px" size="mini" style="padding:10px 20px;">
            <el-row type="flex" justify="space-between">
                <el-col :span="14">
                    <el-form-item label="分享时间" prop="createdDate">
                        <el-date-picker value-format="yyyy-MM-dd" v-model="form.createdDate" type="date" placeholder="选择日期"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="6" style="text-align: right;">
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="currentPage=1;list()">查询</el-button>
                    <el-button @click="currentPage=1;rest()" icon="el-icon-refresh" size="mini">重置</el-button>
                </el-col>
            </el-row>
        </el-form>

        <div class="tem-main">
            <div style="margin-bottom: 14px;" v-if="tabValue==1">
                <el-button @click="cancelShare(selectionList)" :disabled="!selectionList.length">一键取消</el-button>
            </div>
            <el-table v-loading="loading" ref="multipleTable" border :data="dataList" tooltip-effect="dark" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="40" v-if="tabValue==1"></el-table-column>
                <el-table-column label="名称" align="left" width="300" show-overflow-tooltip>
                    <template slot-scope="scope,text">
						<span  v-if="!scope.row.fileExt">
							<i class="el-icon-folder"  style="color:orange"></i>
							{{ scope.row.fileName }}
						</span>
                        <span v-else>
						<i class="el-icon-picture"  style="color:orange" v-if="scope.row.fileExt=='png'||scope.row.fileExt=='jpg'"></i>
						<i class="el-icon-document"  style="color:cornflowerblue" v-else></i>
						{{ scope.row.fileName }}
						</span>
                    </template>
                </el-table-column>
                <el-table-column label="分享时间" align="center" prop="createdDate" width="220"></el-table-column>
                <el-table-column label="有效期" align="center" prop="shareExpired" width="220"></el-table-column>
                <el-table-column label="状态" width="120" align="center">
                    <template slot-scope="scope, text">
                        <span v-if="scope.row.status=='ENABLED'">有效中</span>
                        <span v-if="scope.row.status=='DISABLED'">已失效</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-link type="primary" :underline="false" :disabled="scope.row.status=='DISABLED'" @click="cancelShare(scope.row)" v-if="tabValue==1">取消分享</el-link>
                        <el-link type="primary" :underline="false" :disabled="scope.row.status=='DISABLED'" @click="previewShare(scope.row)" v-if="tabValue==2 && scope.row.fileExt">查看</el-link>
                        <el-link type="primary" :underline="false" :disabled="scope.row.status=='DISABLED'" @click="downloadFile(scope.row)" v-if="tabValue==2">下载</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    background
                    :page-sizes="[10,20,30,40,50,100]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :current-page="currentPage"
                    :page-size="pageSize"
                    :total="total"
                    class="ms-pagination"
                    @current-change='currentChange'
                    @size-change="sizeChange">
            </el-pagination>
        </div>
    </div>
</script>
<script>
    var MainMyShare = {
        template: '#template-main_share',
        data: function () {
            return {
                tabValue: "1",
                conditions: [],
                dataList: [],
                //文章列表
                selectionList: [],
                //文章列表选中
                total: 0,
                //总记录数量
                pageSize: 10,
                //页面数量
                currentPage: 1,
                //初始页
                manager: ms.manager,
                loadState: false,
                loading: true,
                //加载状态
                emptyText: '',
                contentDisplayOptions: [{
                    "value": "0",
                    "label": "是"
                }, {
                    "value": "1",
                    "label": "否"
                }],
                //搜索表单
                form: {
                    createdDate: null
                },
                leaf: true
            }
        },
        methods: {
            //查询列表
            list: function () {
                var that = this;
                that.loading = true;
                that.loadState = false;
                var page = {
                    pageNo: that.currentPage,
                    pageSize: that.pageSize
                };
                var form = JSON.parse(JSON.stringify(that.form));

                for (var key in form) {
                    if (!form[key]) {
                        delete form[key];
                    }
                }

                history.replaceState({
                    form: form,
                    page: page
                }, "");
                var api = '';
                if (that.tabValue==1) {
                    api = ms.manager + "/sharing/list.do"
                }else {
                    api = ms.manager + "/sharing/receive.do"
                }
                //筛选列表
                ms.http.post(api, Object.assign({}, form, page),{
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(function (res) {
                    if (that.loadState) {
                        that.loading = false;
                    } else {
                        that.loadState = true;
                    }

                    if (!res.result || res.data.total <= 0) {
                        that.emptyText = '暂无数据';
                        that.dataList = [];
                        that.total = 0;
                    } else {
                        that.emptyText = '';
                        that.total = res.data.total;
                        that.dataList = res.data.records;
                    }
                }).finally(function () {
                    that.loading = false;
                });
                setTimeout(function () {
                    if (that.loadState) {
                        that.loading = false;
                    } else {
                        that.loadState = true;
                    }
                }, 500);
            },
            //列表选中
            handleSelectionChange: function (val) {
                this.selectionList = val;
            },
            //取消分享
            cancelShare: function (row) {
                var that = this;
                that.$confirm('确认取消分享吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    var form = {
                        shareIds: row.length? row.map( function(v) {return v.shareId}) :[row.shareId]
                    };
                    ms.http.post(ms.manager + "/sharing/cancel.do", form, {
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    }).then(function (res) {
                        if (res.result) {
                            that.$message.success('取消分享成功');
                            that.list();
                        } else {
                            that.$message.warning('取消分享失败');
                        }
                    });
                })
            },
            // 查看
            previewShare: function (row) {
                var filePath = Object.keys(row).length>0 && row.filePath? row.filePath: null;
                if(row.fileExt=='png'||row.fileExt=='jpg'||row.fileExt=='doc'||row.fileExt=='docx'||row.fileExt=='xls'||row.fileExt=='xlsx'||row.fileExt=='pdf'||row.fileExt=='txt') {
                    window.parent.indexVue.onlinePreview(filePath);
                } else {
                    this.downloadFile(row)
                }
            },
            // 下载
            downloadFile: function (row) {
                var that = this;
                ms.http.post(ms.manager + "/cms/document/download.do", {id:row.fileId},{
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    responseType:'blob'

                }).then(function (res) {
                    if(!row.fileExt){
                        that.downLoadMix(res,row.fileName+".zip")
                    }else{
                        that.downLoadMix(res,row.fileName)
                    }
                }).catch(function (err) {
                    that.$message.error('下载失败');
                });
            },
            dateFormat: function (row, column, cellValue, index) {
                if (cellValue) {
                    return ms.util.date.fmt(cellValue, 'yyyy-MM-dd');
                } else {
                    return '';
                }
            },
            //pageSize改变时会触发
            sizeChange: function (pagesize) {
                this.loading = true;
                this.pageSize = pagesize;
                this.list();
            },
            //currentPage改变时会触发
            currentChange: function (currentPage) {
                this.loading = true;
                this.currentPage = currentPage;
                this.list();
            },
            //重置表单
            rest: function () {
                this.$refs.searchForm.resetFields();
                this.list();
            },
            downLoadMix:function(res, fileName){//new Blob([res],{ type: "application/zip" }
                var blob = new Blob([res]); //res为从后台返回的数据
                if ("msSaveOrOpenBlob" in navigator) {
                    window.navigator.msSaveOrOpenBlob(blob, fileName);
                } else {
                    var link = document.createElement('a');
                    var body = document.querySelector('body');
                    link.href = window.URL.createObjectURL(blob);
                    link.download = fileName;
                    link.style.display = 'none';
                    body.appendChild(link);
                    link.click();
                    body.removeChild(link);
                    window.URL.revokeObjectURL(link.href)
                }
            },
            // confirmEnding: function (str, target) {
            //     // 请把你的代码写在这里
            //     var start = str.length-target.length;
            //     var arr = str.substr(start,target.length);
            //     if(arr == target){
            //         return true;
            //     }
            //     return false;
            // },
            // isAssetTypeAnImage: function(ext) {
            //     var extension=ext.substring(ext.lastIndexOf('.')+1);
            //     console.log(extension);
            //     return [
            //         'png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].
            //     indexOf(ext.toLowerCase()) !== -1;
            // }
        },
        created: function () {
            this.list();
            // //文件路径
            // var filePath = "测试.png";
            // //获取最后一个.的位置
            // var index= filePath.lastIndexOf(".");
            // //获取后缀
            // var ext = filePath.substr(index+1);
            // //输出结果
            // console.log(ext);
            // console.log(this.isAssetTypeAnImage(ext));
        }
    }
</script>
<style>
    .el-tabs {
        background-color: #fff;
    }
    .el-tabs__item {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .tem-main {
        margin-top: 10px;
        background-color: #fff;
        padding: 20px;
    }
</style>